<template>
	<view>
		<view class="header">
			<view class="ipt-box">
				<input v-model="on" type="text" value="" placeholder="请输入档案号/姓名" />
				<image src="/static/search1.png" mode="" @click="searchClick"></image>
			</view>
			<view class="header-right">
				<easy-select class="easySelect" style="width:360rpx;height:100%;font-size: 28rpx;color: #fff;" :options="options" ref="easySelect" size="medium" :value="selecValue.label" @selectOne="selectOne"></easy-select>
			</view>
		</view>
		<view class="header1">
			<!-- <das-ipt @SearchEvents="searchClick" :prompt="'请输入档案号/姓名'"></das-ipt>
			<view class="header-right">
				<easy-select class="easySelect" style="width:360rpx;height:100%;font-size: 28rpx;color: #fff;"
					:options="options" ref="easySelect" size="medium" :value="selecValue.label" @selectOne="selectOne">
				</easy-select>
			</view> -->
			
			<view class="header-bottom">
				<!-- <view class="u-flex-1 items" @tap="open1()">
					<input class="ipt" type="text" v-model="value1" disabled placeholder="选择区"
						placeholder-style="color:#FFFFFF" />
					<u-icon :name="show1?'arrow-up':'arrow-down'" color="#FFFFFF"></u-icon>
				</view> -->
				<view class="u-flex-1 items" @tap="open2()">
					<input class="ipt" type="text" v-model="value2" disabled placeholder="选择镇"
						placeholder-style="color:#FFFFFF" />
					<u-icon :name="show2?'arrow-up':'arrow-down'" color="#FFFFFF"></u-icon>
				</view>
				<view class="u-flex-1 items" @tap="open3()">
					<input class="ipt" type="text" v-model="value3" disabled placeholder="选择村"
						placeholder-style="color:#FFFFFF" />
					<u-icon :name="show3?'arrow-up':'arrow-down'" color="#FFFFFF"></u-icon>
				</view>
			</view>
			<u-select v-model="show1" label-name="name" value-name="id" :list="options1" @confirm="select1"></u-select>
			<u-select v-model="show2" label-name="name" value-name="id" :list="options2" @confirm="select2"></u-select>
			<u-select v-model="show3" label-name="name" value-name="id" :list="options3" @confirm="select3"></u-select>
		</view>
		<!-- 审核 -->
		<view class="danger-box">
			<view class="danger-item" v-for="(item,index) in list" :key="index">
				<view class="safe">
					<!-- <image :src="item.avatar" mode=""></image> -->
					<image src="../../static/aqy.png" mode=""></image>
					{{item.realname}}
				</view>
				<view class="pd">档案号：{{item.username}}</view>
				<view class="pd">身份证号：{{item.ID_num}}</view>
				<view class="pd" @tap="call(item.mobile)">电话：{{item.mobile}}</view>
				<view class="pd" v-if="item.adress">地址：{{item.adress}}</view>
				<!-- <view class="pd">安检次数：{{item.count}}</view> -->
				<view class="pd">今年安检次数：{{item.year_count}}</view>
				<view class="pd">历史安检次数：{{item.history_count}}</view>
				<view class="pd">安检状态：{{item.safe_status_text}}</view>
				<view class="pd">气表上报情况：{{item.gasuplod_text}}</view>
				<!-- <image v-if="item.is_safe == 0" class="shenhe" src="" mode=""></image> -->
			</view>
			<!-- <view class="nomodel" v-if="dangerList.length==0">
				<u-empty  text="暂无隐患"  mode="list"></u-empty>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				on: '',
				list: [],
				number: '',
				page: 1,
				dangerList: [],
				show1: false,
				show2: false,
				show3: false,
				value1: '',
				value2: '',
				value3: '',
				id1: '',
				id2: '',
				id3: '',
				options1: [],
				options2: [],
				options3: [],
				group_id: '',
				township_id: '',
				village_id: '',
				options: [{
						id: 1,
						label: '全部'
					},
					{
						id: 2,
						label: '未上传'
					},
					{
						id: 3,
						label: '审核中'
					},
					{
						id: 4,
						label: '已通过'
					},
					{
						id: 5,
						label: '未通过'
					}
				],
				selecValue: {
					id: 1,
					label: '全部'
				},
			}
		},
		onLoad() {
			this.init()
			this.district_list()
			this.township_list()
		},
		methods: {
			selectOne(option) {
				this.selecValue = option
				this.list = []
				this.page = 1
				this.init() 
			},
			district_list() { //区
				let _this = this
				uni.request({
					url: this.$api + 'staff/district_list',
					method: "POST",
					header: _this._header,
					success: (res) => {
						if (res.data.code == 1) {
							_this.options1 = res.data.data
							_this.options1.unshift({
								id: 0,
								name: '全部区域'
							})
							this.value1 = this.options1[0].name
							this.id1 = this.options1[0].id
						}
					}
				})
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			township_list() { //镇
				let _this = this
				uni.request({
					url: this.$api + 'staff/township_list',
					method: "POST",
					header: _this._header,
					data: {
						// district_id: this.id1,
						district_id: 1
					},
					success: (res) => {
						if (res.data.code == 1) {
							_this.options2 = res.data.data
						}
					}
				})
			},
			village_list() { //村
				let _this = this
				uni.request({
					url: this.$api + 'staff/village_list',
					method: 'POST',
					header: this._header,
					data: {
						township_id: this.id2
					},
					success: res => {
						if (res.data.code == 1) {
							_this.options3 = res.data.data
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			open1() {
				this.show1 = true
			},
			open2() {
				// if (this.id1) {
				// 	this.show2 = true
				// } else {
				// 	this.$showToast('请选择区')
				// }
				this.show2 = true
			},
			open3() {
				if (this.id2) {
					this.show3 = true
				} else {
					this.$showToast('请选择乡镇')
				}
			},

			onReachBottom() {
				this.page++;
				this.init()
			},
			searchClick() {
				this.page = 1
				this.list = []
				this.init()
			},

			select1(i) {
				this.value1 = i[0].label
				this.id1 = i[0].value
				if (this.id1 == 0) {
					this.id1 = ''
				}
				this.on = ''
				this.options2 = []
				this.value2 = ''
				this.id2 = ''
				this.list = []
				this.init()
				this.township_list()
			},
			select2(i) {
				this.value2 = i[0].label
				this.id2 = i[0].value
				this.options3 = []
				this.on = ''
				this.value3 = ''
				this.id3 = ''
				this.list = []
				this.init()
				this.village_list()
			},
			select3(i) {
				this.value3 = i[0].label
				this.id3 = i[0].value
				this.on = ''
				this.list = []
				this.init()
			},
			init() {
				let _this = this
				uni.showLoading({
					mask:true,
					title:'加载中...'
				})
				uni.request({
					url: this.$api + 'user/user_seek',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					data: {
						page: _this.page,
						on: _this.on,
						group_id: 1,
						status: _this.selecValue.id,
						township_id: _this.id2,
						village_id: _this.id3
					},
					success: res => {
						for (let i = 0; i < res.data.data.data.length; i++) {
							_this.list.push(res.data.data.data[i])
						}
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pd {
		padding: 5rpx 0;
	}

	page {
		background: #F1F1F1;
		min-height: 100vh;
		.header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			height: 80rpx;
			width: 100%;
			background-color: #003690;
			padding: 0 40rpx;
			.ipt-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;
				width:500rpx;
				height: 52rpx;
				background-color: #fff;
				border-radius: 24rpx;
				input{
					width: 85%;
				}
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			.header-right{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #E2ECFB;
				position: relative;
				width: 200rpx;
				image{
					width: 36rpx;
					height: 36rpx;
				}
				.genFle{
					position: absolute;
					top: 64rpx;
					left: 0;
					width: 100%;
					background-color: #fff;
					border: 2rpx solid #ccc;
					color: #003690;
					text-align: center;
					z-index: 999;
					view{
						border-bottom: 2rpx solid #ccc;
						line-height: 60rpx;
					}
				}
			}
		}

		.header1 {

			box-sizing: border-box;
			// height: 80rpx;
			width: 100%;
			background-color: #003690;

			.header-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 40rpx;

				.ipt-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					padding: 0 20rpx;
					width: 480rpx;
					height: 52rpx;
					background-color: #fff;
					border-radius: 24rpx;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.header1-right {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #E2ECFB;

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}

			.header-bottom {
				padding: 20rpx 0;
				display: flex;
				align-items: center;

				.items {
					display: flex;
					align-items: center;
					justify-content: center;

					.ipt {
						width: 120rpx;
						text-align: end;
						padding-right: 10rpx;
						color: #FFFFFF;
					}
				}


			}

		}

		// 审核
		.danger-item {
			position: relative;
			box-sizing: border-box;
			width: 690rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin: 30rpx auto 0;
			box-shadow: 0px 3px 4px rgba(0, 30, 57, 0.15);

			.safe {
				color: #003690;
				font-size: 28rpx;
				line-height: 38rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 6rpx;
					vertical-align: bottom;
				}
			}

			.kong {
				display: inline-block;
				width: 56rpx;
			}

			.kong1 {
				display: inline-block;
				width: 14rpx;
			}

			.chaoshi_zhuantai {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				color: red;
				font-size: 28rpx;
				line-height: 38rpx;
			}

			.shenhe {
				position: absolute;
				top: 50%;
				right: 20rpx;
				width: 170rpx;
				height: 170rpx;
				transform: translateY(-50%);
			}
		}

	}
</style>
